<template>
	<div class="main-content" :style='{ "color": "#3B3E40", "padding": "30px 30px 30px", "fontSize": "14px" }'>
		<!-- 列表页 -->
		<template v-if="showFlag">
			<el-form class="center-form-pv"
				:style='{ "border": "0px solid #bababa", "padding": "0px", "margin": "0px", "overflow": "hidden", "borderRadius": "0px", "flexWrap": "wrap", "background": "none", "display": "flex", "fontSize": "inherit", "justifyContent": "space-between" }'
				:inline="true" :model="searchForm">
				<el-row
					:style='{ "border": "1px solid #e3e3e3", "padding": "20px", "borderRadius": "5px", "textAlign": "center", "flexWrap": "wrap", "background": "#fff", "flexDirection": "row", "display": "flex", "width": "auto", "fontSize": "inherit", "justifyContent": "flex-start" }'>
					<div :style='{ "margin": "0 10px 0 0", "fontSize": "inherit", "flexWrap": "wrap", "display": "flex" }'>
						<label
							:style='{ "margin": "0 10px 0 0", "color": "inherit", "display": "inline-block", "lineHeight": "40px", "fontSize": "inherit", "fontWeight": "500", "height": "40px" }'
							class="item-label">音乐名称</label>
						<el-input v-model="searchForm.yinlemingcheng" placeholder="音乐名称"
							@keydown.enter.native="search()" clearable></el-input>
					</div>
					<el-button class="search" type="success" @click="search()">
						<span class="icon iconfont icon-chakan12"
							:style='{ "margin": "0 2px", "fontSize": "inherit", "color": "inherit", "display": "none", "height": "40px" }'></span>
						搜索
					</el-button>
				</el-row>

				<el-row class="actions"
					:style='{ "border": "0px solid #e3e3e3", "padding": "0px", "margin": "20px 0 10px", "color": "#fff", "textAlign": "left", "flexDirection": "row", "display": "flex", "justifyContent": "flex-start", "borderRadius": "5px", "flexWrap": "wrap", "background": "none", "width": "100%", "fontSize": "inherit" }'>
					<el-button class="add" v-if="isAuth('chuantongyinle', '新增')" type="success"
						@click="addOrUpdateHandler()">
						<span class="icon iconfont icon-tianjia13"
							:style='{ "margin": "0 2px", "fontSize": "inherit", "color": "inherit", "display": "none" }'></span>
						新增
					</el-button>
					<el-button class="del" v-if="isAuth('chuantongyinle', '删除')"
						:disabled="dataListSelections.length ? false : true" type="danger" @click="deleteHandler()">
						<span class="icon iconfont icon-shanchu7"
							:style='{ "margin": "0 2px", "fontSize": "inherit", "color": "inherit", "display": "none", "height": "40px" }'></span>
						删除
					</el-button>



				</el-row>
			</el-form>
			<div
				:style='{ "border": "1px solid #e9e9e9", "width": "100%", "padding": "20px", "margin": "10px 0 0", "borderRadius": "5px", "background": "rgba(255,255,255,1)" }'>
				<el-table class="tables" :stripe='true'
					:style='{ "padding": "0", "borderColor": "#ddd #e9e9e9 #e9e9e9 #e9e9e9", "color": "inherit", "borderRadius": "0px", "borderWidth": "2px 1px 0 1px", "background": "none", "width": "100%", "fontSize": "inherit", "borderStyle": "solid" }'
					:border='true' v-if="isAuth('chuantongyinle', '查看')" :data="dataList" v-loading="dataListLoading"
					@selection-change="selectionChangeHandler">
					<el-table-column :resizable='true' type="selection" align="center" width="50"></el-table-column>
					<el-table-column :resizable='true' :sortable='true' label="序号" type="index" width="50" />
					<!-- yinlemingcheng -->
					<!-- $column.hiden -->
					<el-table-column :resizable='true' :sortable='true' prop="yinlemingcheng" label="音乐名称">
						<template slot-scope="scope">
							{{ scope.row.yinlemingcheng }}
						</template>
					</el-table-column>
					<!-- zuozhe -->
					<!-- $column.hiden -->
					<el-table-column :resizable='true' :sortable='true' prop="zuozhe" label="作者">
						<template slot-scope="scope">
							{{ scope.row.zuozhe }}
						</template>
					</el-table-column>
					<!-- geci -->
					<!-- $column.hiden -->
					<!-- yinlejieshao -->
					<!-- $column.hiden -->
					<!-- fabushijian -->
					<!-- $column.hiden -->
					<el-table-column :resizable='true' :sortable='true' prop="fabushijian" label="发布时间">
						<template slot-scope="scope">
							{{ scope.row.fabushijian }}
						</template>
					</el-table-column>
					<!-- fengmian -->
					<!-- $column.hiden -->
					<!-- 无 -->
					<el-table-column :resizable='true' :sortable='true' prop="fengmian" width="200" label="封面">
						<template slot-scope="scope">
							<div v-if="scope.row.fengmian">
								<img v-if="scope.row.fengmian.substring(0, 4) == 'http'"
									:src="scope.row.fengmian.split(',')[0]" width="100" height="100"
									style="object-fit: cover">
								<img v-else :src="$base.url + scope.row.fengmian.split(',')[0]" width="100" height="100"
									style="object-fit: cover">
							</div>
							<div v-else>无图片</div>
						</template>
					</el-table-column>
					<el-table-column width="300" label="操作">
						<template slot-scope="scope">
							<el-button class="view" v-if="isAuth('chuantongyinle', '查看')" type="success"
								@click="addOrUpdateHandler(scope.row.id, 'info')">
								<span class="icon iconfont icon-chakan14"
									:style='{ "margin": "0 2px", "fontSize": "inherit", "color": "inherit", "display": "none", "height": "40px" }'></span>
								查看
							</el-button>
							<el-button class="edit" v-if="isAuth('chuantongyinle', '修改')" type="success"
								@click="addOrUpdateHandler(scope.row.id)">
								<span class="icon iconfont icon-xiugai10"
									:style='{ "margin": "0 2px", "fontSize": "inherit", "color": "inherit", "display": "none", "height": "40px" }'></span>
								修改
							</el-button>
							<el-button class="del" v-if="isAuth('chuantongyinle', '删除')" type="primary"
								@click="deleteHandler(scope.row.id)">
								<span class="icon iconfont icon-guanbi1"
									:style='{ "margin": "0 2px", "fontSize": "inherit", "color": "inherit", "display": "none", "height": "40px" }'></span>
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle"
				:current-page="pageIndex" background :page-sizes="[10, 50, 100, 200]" :page-size="pageSize"
				:layout="layouts.join()" :total="totalPage" prev-text="上一页 " next-text="下一页 "
				:hide-on-single-page="false"
				:style='{ "padding": "0", "margin": "20px 0 0", "whiteSpace": "nowrap", "color": "inherit", "textAlign": "left", "width": "100%", "fontSize": "inherit", "fontWeight": "500" }'></el-pagination>
		</template>

		<!-- 添加/修改页面  将父组件的search方法传递给子组件-->
		<add-or-update v-if="addOrUpdateFlag" :parent="this" ref="addOrUpdate"></add-or-update>





	</div>
</template>

<script>
import axios from 'axios'
import AddOrUpdate from "./add-or-update";
export default {
	data() {
		return {
			searchForm: {
				key: ""
			},
			form: {},
			dataList: [],
			pageIndex: 1,
			pageSize: 10,
			totalPage: 0,
			dataListLoading: false,
			dataListSelections: [],
			showFlag: true,
			sfshVisiable: false,
			shForm: {},
			chartVisiable: false,
			chartVisiable1: false,
			chartVisiable2: false,
			chartVisiable3: false,
			chartVisiable4: false,
			chartVisiable5: false,
			addOrUpdateFlag: false,
			layouts: ["total", "prev", "pager", "next"],
		};
	},
	created() {
		this.init();
		this.getDataList();
		this.contentStyleChange()
	},
	mounted() {
	},
	filters: {
		htmlfilter: function (val) {
			return val.replace(/<[^>]*>/g).replace(/undefined/g, '');
		}
	},
	computed: {
		tablename() {
			return this.$storage.get('sessionTable')
		},
	},
	components: {
		AddOrUpdate,
	},
	methods: {
		contentStyleChange() {
			this.contentPageStyleChange()
		},
		// 分页
		contentPageStyleChange() {
			let arr = []

			// if(this.contents.pageTotal) arr.push('total')
			// if(this.contents.pageSizes) arr.push('sizes')
			// if(this.contents.pagePrevNext){
			//   arr.push('prev')
			//   if(this.contents.pagePager) arr.push('pager')
			//   arr.push('next')
			// }
			// if(this.contents.pageJumper) arr.push('jumper')
			// this.layouts = arr.join()
			// this.contents.pageEachNum = 10
		},






		init() {
		},
		search() {
			this.pageIndex = 1;
			this.getDataList();
		},

		// 获取数据列表
		getDataList() {
			this.dataListLoading = true;
			let params = {
				page: this.pageIndex,
				limit: this.pageSize,
				sort: 'id',
				order: 'desc',
			}
			if (this.searchForm.yinlemingcheng != '' && this.searchForm.yinlemingcheng != undefined) {
				params['yinlemingcheng'] = '%' + this.searchForm.yinlemingcheng + '%'
			}
			this.$http({
				url: "chuantongyinle/page",
				method: "get",
				params: params
			}).then(({ data }) => {
				if (data && data.code === 0) {
					this.dataList = data.data.list;
					this.totalPage = data.data.total;
				} else {
					this.dataList = [];
					this.totalPage = 0;
				}
				this.dataListLoading = false;
			});
		},
		// 每页数
		sizeChangeHandle(val) {
			this.pageSize = val;
			this.pageIndex = 1;
			this.getDataList();
		},
		// 当前页
		currentChangeHandle(val) {
			this.pageIndex = val;
			this.getDataList();
		},
		// 多选
		selectionChangeHandler(val) {
			this.dataListSelections = val;
		},
		// 添加/修改
		addOrUpdateHandler(id, type) {
			this.showFlag = false;
			this.addOrUpdateFlag = true;
			this.crossAddOrUpdateFlag = false;
			if (type != 'info') {
				type = 'else';
			}
			this.$nextTick(() => {
				this.$refs.addOrUpdate.init(id, type);
			});
		},
		// 下载
		download(file) {
			let arr = file.replace(new RegExp('upload/', "g"), "")
			axios.get(this.$base.url + 'file/download?fileName=' + arr, {
				headers: {
					token: this.$storage.get('Token')
				},
				responseType: "blob"
			}).then(({
				data
			}) => {
				const binaryData = [];
				binaryData.push(data);
				const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
					type: 'application/pdf;chartset=UTF-8'
				}))
				const a = document.createElement('a')
				a.href = objectUrl
				a.download = arr
				// a.click()
				// 下面这个写法兼容火狐
				a.dispatchEvent(new MouseEvent('click', {
					bubbles: true,
					cancelable: true,
					view: window
				}))
				window.URL.revokeObjectURL(data)
			}, err => {
				axios.get((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] : '') + this.$base.name + '/file/download?fileName=' + arr, {
					headers: {
						token: this.$storage.get('Token')
					},
					responseType: "blob"
				}).then(({
					data
				}) => {
					const binaryData = [];
					binaryData.push(data);
					const objectUrl = window.URL.createObjectURL(new Blob(binaryData, {
						type: 'application/pdf;chartset=UTF-8'
					}))
					const a = document.createElement('a')
					a.href = objectUrl
					a.download = arr
					// a.click()
					// 下面这个写法兼容火狐
					a.dispatchEvent(new MouseEvent('click', {
						bubbles: true,
						cancelable: true,
						view: window
					}))
					window.URL.revokeObjectURL(data)
				})
			})
		},
		// 预览
		preClick(file) {
			if (!file) {
				return false
			}
			window.open((location.href.split(this.$base.name).length > 1 ? location.href.split(this.$base.name)[0] + this.$base.name + '/' + file : this.$base.url + file))
		},
		chuantongyinlestatusChange(e, row) {
			if (row.status == 0) {
				row.passwordwrongnum = 0
			}
			this.$http({
				url: 'chuantongyinle/update',
				method: 'post',
				data: row
			}).then(res => {
				if (row.status == 1) {
					this.$message.error('该用户已锁定')
				} else {
					this.$message.success('该用户已解除锁定')
				}
			})
		},
		// 删除
		deleteHandler(id) {
			var ids = id
				? [Number(id)]
				: this.dataListSelections.map(item => {
					return Number(item.id);
				});
			this.$confirm(`确定进行[${id ? "删除" : "批量删除"}]操作?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}).then(() => {
				this.$http({
					url: "chuantongyinle/delete",
					method: "post",
					data: ids
				}).then(({ data }) => {
					if (data && data.code === 0) {
						this.$message({
							message: "操作成功",
							type: "success",
							duration: 1500,
							onClose: () => {
								this.search();
							}
						});

					} else {
						this.$message.error(data.msg);
					}
				});
			});
		},


	}

};
</script>
<style lang="scss" scoped>
.center-form-pv {
	.el-date-editor.el-input {
		width: auto;
	}
}

.el-input {
	width: auto;
}

// form
.center-form-pv .el-input /deep/ .el-input__inner {
	border: 1px solid #e3e3e3;
	border-radius: 3px;
	padding: 0 12px;
	color: inherit;
	background: #fff;
	width: 150px;
	font-size: inherit;
	line-height: 34px;
	height: 34px;
}

.center-form-pv .el-select /deep/ .el-input__inner {
	border: 1px solid #e3e3e3;
	border-radius: 3px;
	padding: 0 10px;
	color: inherit;
	background: #fff;
	width: 150px;
	font-size: inherit;
	line-height: 34px;
	height: 34px;
}

.center-form-pv .el-date-editor /deep/ .el-input__inner {
	border: 1px solid #e3e3e3;
	border-radius: 3px;
	padding: 0 10px 0 30px;
	color: inherit;
	background: #fff;
	width: 150px;
	font-size: inherit;
	line-height: 34px;
	height: 34px;
}

.center-form-pv .search {
	cursor: pointer;
	padding: 10px 15px;
	margin: 0 10px;
	color: #fff;
	font-size: 14px;
	border-color: #719e37;
	transition: all 0s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	background: linear-gradient(to bottom, #9bc747 0%, #82bd42 100%);
	width: auto;
	border-width: 1px;
	border-style: solid;
	min-width: 80px;
	height: 34px;
}

.center-form-pv .search:hover {}

.center-form-pv .actions .add {
	border: 1px solid #0f70ad;
	cursor: pointer;
	padding: 10px 15px;
	margin: 4px 4px 5px 0;
	color: inherit;
	font-size: inherit;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	background: linear-gradient(to bottom, #208ed3 0%, #0272bd 100%), #208ed3;
	width: auto;
	min-width: 70px;
	height: auto;
}

.center-form-pv .actions .add:hover {
	transform: translate3d(-8px, 0px, 0px);
}

.center-form-pv .actions .del {
	border: 1px solid #af2b1b;
	cursor: pointer;
	padding: 10px 15px;
	margin: 4px 4px 5px;
	color: inherit;
	font-size: inherit;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	background: linear-gradient(to bottom, #bc3423 0%, #cd4433 100%);
	width: auto;
	min-width: 70px;
	height: auto;
}

.center-form-pv .actions .del:hover {
	transform: translate3d(-8px, 0px, 0px);
}

.center-form-pv .actions .statis {
	border: 1px solid #719e37;
	cursor: pointer;
	padding: 10px 15px;
	margin: 4px 4px 5px;
	color: inherit;
	font-size: inherit;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	background: linear-gradient(to bottom, #9bc747 0%, #82bd42 100%);
	width: auto;
	height: auto;
}

.center-form-pv .actions .statis:hover {
	transform: translate3d(-8px, 0px, 0px);
}

.center-form-pv .actions .btn18 {
	border: 1px solid #323537;
	cursor: pointer;
	padding: 10px 15px;
	margin: 4px 4px 5px;
	color: #fff;
	font-size: inherit;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	background: linear-gradient(to bottom, #4b4f51 0%, #414547 100%);
	width: auto;
	height: auto;
}

.center-form-pv .actions .btn18:hover {
	transform: translate3d(-8px, 0px, 0px);
}

// table
.el-table /deep/ .el-table__header-wrapper thead {
	color: inherit;
	background: rgba(254, 169, 34, 0);
	width: 100%;
}

.el-table /deep/ .el-table__header-wrapper thead tr {
	background: linear-gradient(to bottom, #ededee 0%, #dddddd 100%);
}

.el-table /deep/ .el-table__header-wrapper thead tr th {
	padding: 2px 0;
	background: none;
	border-color: #fff;
	border-width: 0 0px 1px 0;
	border-style: solid;
	text-align: left;
}

.el-table /deep/ .el-table__header-wrapper thead tr th .cell {
	padding: 0 0px;
	word-wrap: normal;
	color: #333;
	white-space: normal;
	font-weight: 600;
	display: flex;
	vertical-align: middle;
	font-size: 12px;
	line-height: 24px;
	text-overflow: ellipsis;
	word-break: break-all;
	width: 100%;
	align-items: center;
	position: relative;
}


.el-table /deep/ .el-table__body-wrapper tbody {
	padding: 0;
	width: 100%;
}

.el-table /deep/ .el-table__body-wrapper tbody tr {
	background: none;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td {
	padding: 2px 0;
	color: inherit;
	background: none;
	font-size: inherit;
	border-color: #f4f4f4;
	border-width: 0 0px 1px 0px;
	border-style: solid;
	text-align: left;
}

.el-table /deep/ .el-table__body-wrapper tbody tr.el-table__row--striped td {
	background: #f0f0f0;
}

.el-table /deep/ .el-table__body-wrapper tbody tr:hover td {
	padding: 2px 0;
	color: #fff;
	background: linear-gradient(to bottom, #208ed3 0%, #0272bd 100%), #208ed3;
	font-weight: 500;
	border-color: #e9e9e9;
	border-width: 0 0px 1px 0px;
	border-style: solid;
	text-align: left;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td {
	padding: 2px 0;
	color: inherit;
	background: none;
	font-size: inherit;
	border-color: #f4f4f4;
	border-width: 0 0px 1px 0px;
	border-style: solid;
	text-align: left;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .cell {
	padding: 0 0px;
	overflow: hidden;
	color: inherit;
	word-break: break-all;
	white-space: normal;
	display: flex;
	font-size: 12px;
	line-height: 24px;
	text-overflow: ellipsis;
	flex-wrap: wrap;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .view {
	border: 1px solid #0f70ad;
	cursor: pointer;
	padding: 0 10px;
	margin: 0 5px 5px 0;
	color: #fff;
	font-size: 13px;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	background: linear-gradient(to bottom, #208ed3 0%, #0272bd 100%);
	width: auto;
	min-width: 40px;
	height: 30px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .view:hover {
	transform: translate3d(-8px, 0px, 0px);
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .add {}

.el-table /deep/ .el-table__body-wrapper tbody tr td .add:hover {}

.el-table /deep/ .el-table__body-wrapper tbody tr td .edit {
	border: 1px solid #719e37;
	cursor: pointer;
	padding: 0 10px;
	margin: 0 5px 5px 0;
	color: #fff;
	font-size: 13px;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	background: linear-gradient(to bottom, #9bc747 0%, #82bd42 100%);
	width: auto;
	min-width: 40px;
	height: 30px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .edit:hover {
	transform: translate3d(-8px, 0px, 0px);
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .del {
	border: 1px solid #af2b1b;
	cursor: pointer;
	padding: 0 10px;
	margin: 0 5px 5px 0;
	color: #fff;
	font-size: 13px;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	background: linear-gradient(to bottom, #bc3423 0%, #cd4433 100%);
	width: auto;
	height: 30px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .del:hover {
	transform: translate3d(-8px, 0px, 0px);
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .btn8 {
	border: 1px solid #323537;
	cursor: pointer;
	padding: 0 10px;
	margin: 0 5px 5px 0;
	color: #fff;
	font-size: 13px;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	background: linear-gradient(to bottom, #4b4f51 0%, #414547 100%);
	width: auto;
	height: 30px;
}

.el-table /deep/ .el-table__body-wrapper tbody tr td .btn8:hover {
	transform: translate3d(-8px, 0px, 0px);
}

// pagination
.main-content .el-pagination /deep/ .el-pagination__total {
	margin: 0 10px 0 0;
	color: inherit;
	font-weight: 400;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 28px;
	height: 28px;
}

.main-content .el-pagination /deep/ .btn-prev {
	border: none;
	border-radius: 2px;
	padding: 0 5px;
	margin: 0 5px;
	color: inherit;
	background: none;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 28px;
	min-width: 35px;
	height: 28px;
}

.main-content .el-pagination /deep/ .btn-next {
	border: none;
	border-radius: 2px;
	padding: 0 5px;
	margin: 0 5px;
	color: inherit;
	background: none;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 28px;
	min-width: 35px;
	height: 28px;
}

.main-content .el-pagination /deep/ .btn-prev:disabled {
	border: none;
	cursor: not-allowed;
	border-radius: 2px;
	padding: 0 5px;
	margin: 0 5px;
	color: #999;
	background: none;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 28px;
	height: 28px;
}

.main-content .el-pagination /deep/ .btn-next:disabled {
	border: none;
	cursor: not-allowed;
	border-radius: 2px;
	padding: 0 5px;
	margin: 0 5px;
	color: #999;
	background: none;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 28px;
	height: 28px;
}

.main-content .el-pagination /deep/ .el-pager {
	padding: 0;
	margin: 0;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
}

.main-content .el-pagination /deep/ .el-pager .number {
	cursor: pointer;
	padding: 0 4px;
	margin: 0 5px;
	color: inherit;
	background: none;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 24px;
	text-align: center;
	height: 24px;
}

.main-content .el-pagination /deep/ .el-pager .number:hover {
	cursor: pointer;
	padding: 0 4px;
	margin: 0 5px;
	color: #fff;
	background: #1c84c6;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 24px;
	text-align: center;
	height: 24px;
}

.main-content .el-pagination /deep/ .el-pager .number.active {
	cursor: default;
	padding: 0 4px;
	margin: 0 5px;
	color: #fff;
	background: #1c84c6;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 24px;
	text-align: center;
	height: 24px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes {
	color: inherit;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 28px;
	height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input {
	margin: 0 5px;
	color: inherit;
	width: 100px;
	font-size: inherit;
	position: relative;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__inner {
	border: 0px solid #ddd;
	cursor: pointer;
	padding: 0 25px 0 8px;
	color: inherit;
	display: inline-block;
	font-size: inherit;
	line-height: 28px;
	border-radius: 3px;
	outline: 0;
	background: none;
	width: 100%;
	text-align: center;
	height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input span.el-input__suffix {
	top: 0;
	position: absolute;
	right: 0;
	height: 100%;
}

.main-content .el-pagination /deep/ .el-pagination__sizes .el-input .el-input__suffix .el-select__caret {
	cursor: pointer;
	color: #C0C4CC;
	width: 25px;
	font-size: 14px;
	line-height: 28px;
	text-align: center;
}

.main-content .el-pagination /deep/ .el-pagination__jump {
	margin: 0 0 0 24px;
	color: inherit;
	display: inline-block;
	vertical-align: top;
	font-size: inherit;
	line-height: 28px;
	height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__jump .el-input {
	border-radius: 3px;
	padding: 0 2px;
	margin: 0 2px;
	color: inherit;
	display: inline-block;
	width: 50px;
	font-size: inherit;
	line-height: 18px;
	position: relative;
	text-align: center;
	height: 28px;
}

.main-content .el-pagination /deep/ .el-pagination__jump .el-input .el-input__inner {
	border: 1px solid #eee;
	cursor: pointer;
	padding: 0 0px;
	color: inherit;
	display: inline-block;
	font-size: inherit;
	line-height: 24px;
	border-radius: 3px;
	outline: 0;
	background: none;
	width: auto;
	text-align: center;
	height: 24px;
}

// list one
.one .list1-view {
	border: 1px solid #0f70ad;
	cursor: pointer;
	padding: 0 6px 0 4px;
	margin: 0px 5px 5px 0;
	color: #fff;
	font-size: inherit;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	background: linear-gradient(to bottom, #208ed3 0%, #0272bd 100%);
	width: auto;
	min-width: 58px;
	height: 32px;
}

.one .list1-view:hover {
	transform: translate3d(-6px, 0px, 0px);
}

.one .list1-edit {
	border: 1px solid #719e37;
	cursor: pointer;
	padding: 0 6px 0 4px;
	margin: 0px 5px 5px 0;
	color: #fff;
	font-size: inherit;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
	background: linear-gradient(to bottom, #9bc747 0%, #82bd42 100%);
	width: auto;
	min-width: 58px;
	height: 32px;
}

.one .list1-edit:hover {
	transform: translate3d(-4px, 0px, 0px);
}

.one .list1-del {
	border: 1px solid #0260ad30;
	cursor: pointer;
	padding: 0 6px 0 4px;
	margin: 0px 5px 5px 0;
	color: #fff;
	font-size: inherit;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	background: linear-gradient(to bottom, #bc3423 0%, #cd4433 100%);
	width: auto;
	min-width: 58px;
	height: 32px;
}

.one .list1-del:hover {
	transform: translate3d(-4px, 0px, 0px);
}

.one .list1-btn8 {
	border: 1px solid #323537;
	cursor: pointer;
	padding: 0 6px 0 4px;
	margin: 0px 5px 5px 0;
	color: #fff;
	font-size: inherit;
	transition: all 0.5s;
	border-radius: 3px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
	background: linear-gradient(to bottom, #4b4f51 0%, #414547 100%);
	width: auto;
	min-width: 48px;
	height: 32px;
}

.one .list1-btn8:hover {
	transform: translate3d(-4px, 0px, 0px);
}

.main-content .el-table .el-switch {
	display: inline-flex;
	vertical-align: middle;
	line-height: 30px;
	position: relative;
	align-items: center;
	height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__label--left {
	cursor: pointer;
	margin: 0 10px 0 0;
	color: #333;
	font-weight: 500;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	transition: .2s;
	height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__label--right {
	cursor: pointer;
	margin: 0 0 0 10px;
	color: #333;
	font-weight: 500;
	display: inline-block;
	vertical-align: middle;
	font-size: 16px;
	transition: .2s;
	height: 30px;
}

.main-content .el-table .el-switch /deep/ .el-switch__core {
	border: 1px solid #b0d5f6;
	cursor: pointer;
	border-radius: 20px;
	margin: 0;
	outline: 0;
	background: #b0d5f6;
	display: inline-block;
	width: 40px;
	box-sizing: border-box;
	transition: border-color .3s, background-color .3s;
	height: 20px;
}

.main-content .el-table .el-switch /deep/ .el-switch__core::after {
	border-radius: 100%;
	top: 1px;
	left: 1px;
	background: #FFF;
	width: 16px;
	position: absolute;
	transition: all .3s;
	height: 16px;
}

.main-content .el-table .el-switch.is-checked /deep/ .el-switch__core::after {
	margin: 0 0 0 -17px;
	left: 100%;
}

.main-content .el-table .el-rate /deep/ .el-rate__item {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
	font-size: 0;
	position: relative;
}

.main-content .el-table .el-rate /deep/ .el-rate__item .el-rate__icon {
	margin: 0 3px;
	color: #c0c4cc;
	display: inline-block;
	font-size: 18px;
	position: relative;
	transition: .3s;
}
</style>
